<%--
  Created by IntelliJ IDEA.
  User: Vison
  Date: 2019/11/21
  Time: 11:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>

    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.mloading.js"></script>
    <script src="css/jquery.mloading.css"></script>

  </head>
  <body>

  <button type="button">请求加载数据</button>
  <div style="margin:0 auto ; width: 200px ; height: 200px ;border: 1px solid black"></div>


  </body>

<script>
  $(function () {
      $("button").on("click",function () {
          $.ajax({
              type:"get",   //请求方式

              url:"AjaxServlet/getData",  //请求路径

              data:{"name":"jack","age":18},  //要发送的到服务器的数据

              success:function (resp) {   //请求完成后执行的fun方法
                  $("div").html(resp)
              },


              error:function (err) {    //请求出错后才会执行的fun方法
                  console.log(err)
              },


              complete:function () {    //不管请求失败还是成功都会执行的fun方法
                  console.log("请求完成")
                  $("body").mLoading("hide"); //隐藏加载中 组件
              },


              beforeSend:function () {   //每次请求优先执行beforeSend;
                  console.log("预备转圈圈")
                  $("body").mLoading("show");
              }
              });
          });
  });


</script>


</html>
